<template>
	<view class="app-ranking">
		<NavBar title="排名" :isHeight="false"></NavBar>
		<SwiperList />
		<view class="main-bg">
			<!-- 通知栏 -->
			<NotificationList />
			<!-- 排行榜 -->
			<RankingList @change="handleChange" />
		</view>
		<!-- 主要内容区 -->
		<view class="main-content">
			<view class="list">
				<view class="item" v-for="item of 5" :key="item">
					<view class="num">4</view>
					<image src="/static/1.png" mode="" />
					<view class="cont">
						<view class="name">鸿运China乔氏国际 台球俱乐部</view>
						<view class="location">临沂市 10.4km</view>
					</view>
					<view class="money">
						<view class="price">9800</view>
						<view class="text">{{ textName }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import SwiperList from '@/components/SwiperList.vue'
import NotificationList from '@/components/NotificationList.vue'
import RankingList from '@/components/RankingList.vue'
import { ref, computed } from 'vue'
const active = ref(0)
const textName = computed(() => {
	switch (active.value) {
		case 0: return '累计奖金'
		case 1: return '公会奖金'
		case 2: return '个人奖金'
		case 3: return '执裁奖金'
	}
})
function handleChange(val) {
	active.value = val
}
</script>

<style lang="scss" scoped>
.app-ranking {
	min-height: 100vh;
	background: #F5F6F8;

	.main-bg {
		margin-top: -54rpx;
		background: linear-gradient(180deg, #FFFFFF 78%, #F5F6F8 100%);
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx 28rpx 0 28rpx;
		position: relative;
		z-index: 1;
	}

	.main-content {
		padding: 20rpx 28rpx;

		.list {
			.item {
				padding: 28rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.num {
					font-weight: 600;
					font-size: 30rpx;
					color: #909399;
					margin-right: 26rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 36rpx;
				}

				.cont {
					flex: 1;

					.name {
						font-size: 30rpx;
						color: #303133;
						line-height: 36rpx;
						margin-bottom: 10rpx;
					}

					.location {
						font-size: 24rpx;
						color: #909399;
						line-height: 32rpx;
					}
				}

				.money {
					text-align: center;

					.price {
						font-weight: 500;
						font-size: 32rpx;
						color: #E10509;
						margin-bottom: 6rpx;
					}

					.text {
						font-size: 24rpx;
						color: #909399;
						line-height: 32rpx;
					}
				}
			}
		}
	}

}
</style>